<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="box">
        <h5>父组件</h5>
        <comp-one :num="source"></comp-one>
        <comp-one :num="count"></comp-one>
        <comp-one :num="count" :s="source"></comp-one>

    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h5>子组件</h5>
            <p>{{ (num*1).toFixed(2) }}</p>
            <p>{{ s.toFixed(2) }}</p>
            <p>arr:{{ arr }}</p>
        </div>
    </script>

    <script type="module"> 
        /*
            props 的校验规则是针对于开发者而非使用者
                => 目的是为了在组件开发中，可以有效提示使用组件的开发者，组件需要那些特定参数，参数类型等相关消息
            props 通过取值Object 对象配置，可以详细为每个拦截属性构建校验规则
        */
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    source:4,
                    count:"13.1"
                }
            }
        })
        
        app.component("CompOne",{
            template:"#compOne",
            // props:["num"]
            props:{
                // key:value
                // key => 需要拦截的属性名称
                // value => 构造函数|对象配置
                //          1.对象配置 取值为固定对象格式 { required:false,type:构造函数|[构造函数……],validator:function(v){} }
                //              + required 表示组件在调用时，该属性是否为必传属性 默认值false
                //              + type 通过取值构造函数方式，完成数据类型校验
                //              + validator 取值方法，由开发者自行定义校验过程，通过返回 true 或者 false 表示成功或失败
                //              + default 用于为拦截属性定义默认值，在组件使用未传递参数的时候，可以取值该值进行组件页面渲染
                num:{
                    required:true,
                    // type:Number
                    type:[Number,String],
                    validator:function(v){
                        // return true
                        // return false
                        // console.log(v)
                        // return (v*1)>=0&&(v*1)<=10
                        // 实际开发的项目应用
                        if( (v*1)<0||(v*1)>10 ){
                            console.warn(`num属性的取值必须在0~10之间,当前取值为${v}`)
                        }
                        // return true;
                        return (v*1)>=0&&(v*1)<=10;
                    }
                },
                s:{
                    // default 默认取值和 required 比传定义不会同时为一个拦截属性进行限制
                    default:0,
                    type:[Number,String],
                    validator:function(v){
                        if( (v*1)<0||(v*1)>10 ){
                            console.warn(`num属性的取值必须在0~10之间,当前取值为${v}`)
                        }
                        return (v*1)>=0&&(v*1)<=10;
                    }
                },
                arr:{
                    // 引用数据而言，默认值必须是工厂函数
                    default:function(){
                        return [1,2,3,4,5]
                    }
                },
                user:{},  // 无校验
                info:String, // 只限制数据类型
                test:[Number,String] // 只限制数据类型
            }
        })
        
        app.mount("#app")
    </script>
</body>
</html>